import RightBottom from '@/components/rightBottom'
import RightTop from '@/components/rightTop'
import { labelItem, listItem } from '@/utils/Article'
import { useEffect } from 'react'
import { useSelector, useDispatch ,useHistory} from "umi"
import {NavLink} from 'umi'

import styles from './archives.less'
const archives: React.FC = () => {
    let History=useHistory()
    const state = useSelector((state: { archives: any }) => state.archives)
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            type: "archives/query"
        })
        dispatch({
            type: 'archives/readinglist'
          });
          dispatch({
            type: 'archives/getlabel'
          });
    }, [])
    let month: Array<string> = []
    if (state.keys.length > 0) {
        month = Object.keys(state.list[state.keys[0]]) 
    }
    console.log(state.list)
    return <div className={styles.big}>
        <section className={styles.sec}>
            <div className={styles.top}>
                <span>归档</span>
                <span>共32篇</span>
            </div>
            {
                state.keys.map((item: string, index: number) => {
                    return <h1 className={styles.h1} key={index}>{item}
                        {
                            (Object.keys(state.list[state.keys[index]])).map((item1, index1) => {
                                return <ul className={styles.p} key={index1}>{item1}               
                                    {   
                                        (state.list[state.keys[index]][month[index1]])&&(state.list[state.keys[index]][month[index1]]).map((item2:any,index2:number)=>{
                                            return <li className={styles.p1} key={index2}  onClick={()=>{
                                                History.push(`/page/readDetail` , item2.id)
                                            }} >{item2.title}</li>
                                        })
                                    }
                                </ul>
                            })
                        }
                    </h1>
                })
            }
        </section>
        <div className="right">
      <div className="right_top">
               <h3>推荐阅读</h3>
              {
               state.readList&&state.readList.map((item:listItem,index:number)=>{
                return <RightTop key={index} item={item} />
               })
              }
            </div>
            <div className="right_bottom">
               <h3>文章标签</h3>
                <div className="bottomitem">
                {
                  state.labellist.map((item:labelItem,index:number)=>{
                    return <RightBottom item={item} key={index} />
                  })
              }
                </div>
            </div>
      </div>
              
      
    </div>
}
export default archives